<!-- 可编辑的【表格】  -->

<template>
  <div class="tableContain tableFormClass">
    <!-- 批量填充开始 -->
    <div style="margin-bottom: 10px; display: flex">
      <el-select
        style="margin-right: 10px"
        v-model="lotFillParam"
        size="mini"
        @change="lotFillChange"
        clearable
        value-key="paramName"
        :disabled="showState != 0 "
      >
        <template v-for="item in tableHeader">
          <el-option
            v-if="item.operateType == 'batchEdit'"
            :key="item.paramName"
            :label="item.title"
            :value="item"
          ></el-option>
        </template>
      </el-select>
      <template v-if="lotFillParam.type == 'dateTime'">
        <el-date-picker
          size="mini"
          v-model="lotFillValue"
          type="date"
          placeholder="选择日期时间"
          align="right"
          :editable="false"
          value-format="yyyy-MM-dd"
          :disabled="showState != 0"
        ></el-date-picker>
      </template>
      <template v-else-if="lotFillParam.type == 'radio'">
        <el-radio v-model="lotFillValue" :label="0" :disabled="showState != 0 ">否</el-radio>
        <el-radio v-model="lotFillValue" :label="1" :disabled="showState != 0 ">是</el-radio>
      </template>

      <template v-else-if="lotFillParam.type == 'dataSelect'">
        <div style="position: relative">
          <el-select
            v-model="lotFillValueFS"
            filterable
            remote
            :remote-method="remoteFilMethod"
            :loading="loading"
            @focus="focusFilter"
            @visible-change="visibleChange"
            @change="returnData1"
            value-key="name"
            :disabled="showState != 0"
          >
            <!-- 下拉的表头 -->
            <div class="headerTr">
              <template v-for="item in selectHeader">
                <div
                  v-if="item.type != 'null'"
                  class="selectHeaderClass"
                  :key="item.tableValue"
                >{{ item.title }}</div>
              </template>
            </div>
            <!-- 下拉的内容 -->
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item"
              class="optionContain"
            >
              <div class="selectTr">
                <template v-for="item1 in selectHeader">
                  <div
                    class="selectTd"
                    v-if="item1.type != 'null'"
                    :key="item1.tableValue"
                  >{{ item[item1.tableValue] }}</div>
                </template>
              </div>
            </el-option>
          </el-select>
          <span class="el-icon-search searchIcon" @click="openDialog1(lotFillParam)"></span>
        </div>
      </template>
      <template v-else>
        <el-input
          class="inputText"
          v-model="lotFillValue"
          type="text"
          size="mini"
          placeholder="请输入数据"
          :disabled="showState != 0 || dataType !=1"
        ></el-input>
      </template>
      <el-button
        type="info"
        size="mini"
        style="margin-left: 10px"
        @click="fillClick"
        :disabled="showState != 0 "
      >批量填充</el-button>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="savePart"
        :disabled="showState != 0"
      >保存</el-button>
    </div>
    <!-- 批量填充结束 -->

    <div
      class="btnList"
      v-if="showType != 'tableNotAdd' && (hiddenButton == null || !hiddenButton)"
    >
      <el-button
        type="primary"
        size="mini"
        @click="addRow"
        :disabled="showState != 0 || dataType !=1"
      >新增行</el-button>
      <el-button
        type="success"
        size="mini"
        @click="copyRow"
        :disabled="showState != 0 || dataType !=1"
      >复制行</el-button>
      <el-button
        type="warning"
        size="mini"
        @click="deleteRow"
        :disabled="showState != 0 || dataType !=1"
      >删除行</el-button>
    </div>

    <el-form
      ref="editFormRef"
      label-width="120px"
      size="mini"
      :inline="true"
      :model="formTable"
      class="tableLineClass"
      :class="isCheck == 1 ? 'isCheckClass' : ''"
    >
      <pl-table
        use-virtual
        border
        :data="formTable.tableData"
        highlight-current-row
        style="width: 100%"
        @select="selectTdClick"
        @select-all="selectAllClick"
        max-height="350"
        @row-click="rowClick"
        @row-dblclick="rowDblclick"
        :empty-text="emptyText"
        ref="table"
        :header-cell-style="{ background: '#eeeeee', color: '#000' }"
      >
        <pl-table-column type="selection" width="36"></pl-table-column>
        <pl-table-column type="index" label="序号" width="50" fixed></pl-table-column>
        <template v-for="item1 in tableHeader">
          <pl-table-column
            :prop="item1.paramName"
            :key="item1.paramName"
            :min-width="item1.width"
            v-if="item1.type != 'null'"
          >
            <template slot="header" scope-scope="scope">
              <span class="star" v-if="!item1.null">*</span>
              <span class="starName">{{ item1.title }}</span>
              <thSelectHeader
                :property="item1.paramName"
                :checkList="checkList"
                @selectChange="selectChange"
                @resetChange="resetChange"
              ></thSelectHeader>
            </template>

            <!-- 判断单元格是否可编辑（是什么样的编辑类型） -->
            <template slot-scope="scope">
              <template v-if="item1.allow && showState == 0">
                <el-form-item
                  :prop="'tableData.' + scope.$index + '.' + item1.paramName"
                  :key="scope.row.key"
                  class
                >
                  <!-- 文本 -->
                  <el-input
                    class="tableinput"
                    type="text"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-if="item1.type == 'text'"
                    :maxLength="item1.maxLength"
                  ></el-input>

                  <!-- 整数 -->
                  <el-input
                    class="tableinput"
                    type="number"
                    v-model.number="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'int'"
                    min="0"
                    :maxLength="item1.maxLength"
                  ></el-input>

                  <!-- 小数 -->
                  <el-input
                    class="tableinput"
                    type="number"
                    v-model.number="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'float'"
                  ></el-input>

                  <!-- 密码 -->
                  <el-input
                    class="tableinput"
                    type="password"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                    v-else-if="item1.type == 'password'"
                  ></el-input>

                  <!-- 小窗口 -->
                  <template v-else-if="item1.type == 'dataSelect'">
                    <!-- 多选 -->
                    <template v-if="item1.operateType == 'selectMany'">
                      <el-input
                        class="tableinput"
                        v-model="scope.row[scope.column.property]"
                        disabled
                      >
                        <i
                          slot="suffix"
                          class="el-icon-search"
                          style="
                            color: #30a7d6;
                            font-weight: 700;
                            font-size: 14px;
                          "
                          @click="openDialog(item1, scope.$index, scope.row)"
                          v-if="item1.allow"
                        ></i>
                      </el-input>
                    </template>
                    <!-- 单选 -->
                    <template v-else>
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        :loading="loading"
                        @focus="focusInput(item1, scope.$index)"
                        @visible-change="visibleChange"
                        @change="returnData"
                        value-key="name"
                        :disabled="!item1.allow"
                      >
                        <!-- 下拉的表头 -->
                        <div class="headerTr">
                          <template v-for="item in selectHeader">
                            <div
                              v-if="item.type != 'null'"
                              class="selectHeaderClass"
                              :key="item.tableValue"
                            >{{ item.title }}</div>
                          </template>
                        </div>
                        <!-- 下拉的内容 -->
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.code"
                          :value="item"
                          class="optionContain"
                        >
                          <div class="selectTr">
                            <template v-for="item1 in selectHeader">
                              <div
                                class="selectTd"
                                v-if="item1.type != 'null'"
                                :key="item1.tableValue"
                              >{{ item[item1.tableValue] }}</div>
                            </template>
                          </div>
                        </el-option>
                      </el-select>
                      <span
                        class="el-icon-search searchIcon"
                        @click="openDialog(item1, scope.$index, scope.row)"
                        v-if="item1.allow && showState == 0"
                      ></span>
                    </template>
                  </template>

                  <!-- 带出的数据填充框 -->
                  <template v-else-if="item1.type == 'dataSelectSub'">
                    <p>{{ scope.row[scope.column.property] }}</p>
                  </template>

                  <!-- 单选框 -->
                  <template v-else-if="item1.type == 'radio'">
                    <!-- 单选框的数字类型 -->
                    <el-checkbox
                      v-if="typeof scope.row[scope.column.property] == 'number'"
                      v-model="scope.row[scope.column.property]"
                      :true-label="1"
                      :false-label="0"
                      :disabled="!item1.allow"
                    ></el-checkbox>
                    <!-- 单选框的字符串类型 -->
                    <el-checkbox
                      v-else
                      v-model="scope.row[scope.column.property]"
                      true-label="1"
                      false-label="0"
                      :disabled="!item1.allow"
                    ></el-checkbox>
                  </template>

                  <!--普通下拉选择器【单选】 -->
                  <el-select
                    v-else-if="item1.type == 'select'"
                    v-model="scope.row[scope.column.property]"
                    :disabled="!item1.allow"
                  >
                    <el-option
                      :label="item2.title"
                      :value="item2.value"
                      v-for="item2 in item1.selectItems"
                      :key="item2.value"
                    ></el-option>
                  </el-select>

                  <!-- 日期型 -->
                  <el-date-picker
                    v-model="scope.row[scope.column.property]"
                    type="date"
                    :placeholder="item1.allow ? '选择日期' : ''"
                    v-else-if="item1.type == 'dateTime'"
                    :disabled="!item1.allow"
                  ></el-date-picker>

                  <!-- null型 -->
                  <el-input
                    class="inputNull"
                    v-else-if="item1.type == 'null'"
                    v-model="scope.row[scope.column.property]"
                    disabled
                  ></el-input>
                </el-form-item>
              </template>
              <template v-else>
                <template v-if="item1.type == 'radio'">
                  <!-- 单选框的数字类型 -->
                  <el-checkbox
                    class="NotAllowClass"
                    v-if="typeof scope.row[scope.column.property] == 'number'"
                    v-model="scope.row[scope.column.property]"
                    :true-label="1"
                    :false-label="0"
                    :disabled="!item1.allow"
                  ></el-checkbox>
                  <!-- 单选框的字符串类型 -->
                  <el-checkbox
                    class="NotAllowClass"
                    v-else
                    v-model="scope.row[scope.column.property]"
                    true-label="1"
                    false-label="0"
                    :disabled="!item1.allow"
                  ></el-checkbox>
                </template>
                <p v-else>{{ scope.row[scope.column.property] }}</p>
              </template>
            </template>
          </pl-table-column>
        </template>
      </pl-table>
    </el-form>

    <!-- 批量选择带出数据 -->
    <el-dialog
      :title="dialogTitle"
      center
      v-dialogDrag
      :append-to-body="true"
      :visible.sync="fillopenDialogVisible"
      v-if="fillopenDialogVisible"
      :width="'900px'"
      :before-close="dialogBeforeClose1"
    >
      <info-dialog
        :dataId="dataId"
        :actionObj="actionObj"
        :operateType="operateType"
        :unActionValue="unActionValue"
        :paramValue="paramValue"
        @returnData="returnData1"
        ref="infoDialogRefs1"
      ></info-dialog>
    </el-dialog>

    <!-- 弹窗带出数据 -->
    <el-dialog
      :title="dialogTitle"
      center
      v-dialogDrag
      :append-to-body="true"
      :visible.sync="openDialogVisible"
      v-if="openDialogVisible"
      :width="'900px'"
      :before-close="dialogBeforeClose"
    >
      <info-dialog
        :dataId="dataId"
        :actionObj="actionObj"
        :operateType="operateType"
        :unActionValue="unActionValue"
        :paramValue="paramValue"
        @returnData="returnData"
        ref="infoDialogRefs"
      ></info-dialog>
    </el-dialog>
  </div>
</template>

<script>
import infoDialog from "./dialog/infoDialog.vue";
import thSelectHeader from "./input/popover.vue";
import { PlTable, PlTableColumn, PlxTableGrid, PlxTableColumn } from "pl-table";
export default {
  name: "tableform3",
  components: {
    infoDialog,
    PlTable,
    PlTableColumn,
    thSelectHeader
  },
  data() {
    return {
      isShowTd: true, //【明细】 输入框与文本内容的切换显示
      editRules: [], //验证规则
      formTable: {
        tableData: this.tableData
      },
      dialogTitle: "", //弹出框的标题
      openDialogVisible: false, //对话框的显示与隐藏
      actionObj: null,
      actionValue: "", // 记录带出框的数据
      rowIndex: null, // 表格对应的行数
      orgData: null,
      selectRowList: [], //选中的表格数据
      dataId: null, //当前点击的行ID
      quickUrl: "", //输入框下拉选择内容
      addTableData: {}, //新增的数据对象

      // 批量修改
      fillQuickUrl: null,
      fillActionValue: "",
      fillopenDialogVisible: false,
      lotFillParam: "", //字段
      lotFillValue: null, //填充值
      lotFillValueFS: null, // 携带

      options: "", //下拉选择器【多选的数据】
      loading: false,
      selectHeader: [],
      // 下拉多选
      operateType: null, //标记下拉多选

      // 表头过滤条件
      rules: {},
      checkList: {}, // 过滤条件（也就是表格内部的数据）
      paramValue: "",
      unActionValue: ""
    };
  },
  props: {
    hiddenButton: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    tableHeader: {
      type: Array,
      default: () => {
        return [];
      }
    }, //表头数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    }, //表body数据
    maxHeight: {
      type: Number,
      default: 300
    }, // 表格高度 300
    openType: {
      type: String,
      default: ""
    },
    dataType: {
      type: Number,
      default: 0
    },
    emptyText: {
      type: String,
      default: "暂无数据"
    },
    showType: {
      type: String,
      default: "table"
    },
    isCheck: {
      type: Number,
      default: 0
    },
    showState: {
      type: Number,
      default: 0
    }
  },
  created() {
    this.orgData = JSON.parse(sessionStorage.getItem("orgData"));
  },
  watch: {
    tableData: {
      handler(nav) {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
          this.formTable.tableData = nav;
        });

        this.checkList = {};
        for (let k in this.tableData[0]) {
          this.checkList[k] = [];
        }
        for (let i in this.tableData) {
          for (let k in this.tableData[i]) {
            if (
              this.checkList[k] &&
              this.checkList[k].findIndex(
                item => item == this.tableData[i][k]
              ) == -1
            ) {
              this.checkList[k].push(this.tableData[i][k]);
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
    // 获取一行新的空表格数据（对象形式的）
    tableHeader: {
      handler(nav) {
        nav.forEach(item1 => {
          let key = "";
          if (item1.type != "dataSelectSub") {
            if (item1.type == "dataSelect") {
              key = JSON.parse(JSON.stringify(item1.actionValue));
              this.addTableData[key] = parseInt(
                JSON.parse(JSON.stringify(item1.lockValue))
              );
              key = JSON.parse(JSON.stringify(item1.paramName));
              this.addTableData[key] = JSON.parse(JSON.stringify(item1.value));
            } else if (item1.type == "select") {
              key = JSON.parse(JSON.stringify(item1.actionValue));
              this.addTableData[key] = parseInt(
                JSON.parse(JSON.stringify(item1.value))
              );
            } else if (item1.type == "radio" || item1.type == "int") {
              key = JSON.parse(JSON.stringify(item1.paramName));
              this.addTableData[key] = parseInt(
                JSON.parse(JSON.stringify(item1.value))
              );
            } else if (item1.type == "float") {
              key = JSON.parse(JSON.stringify(item1.paramName));
              this.addTableData[key] = parseFloat(
                JSON.parse(JSON.stringify(item1.value))
              );
            } else {
              key = JSON.parse(JSON.stringify(item1.paramName));
              if (item1.value == null) {
                this.addTableData[key] = "";
              } else {
                this.addTableData[key] = JSON.parse(
                  JSON.stringify(item1.value)
                );
              }
            }
          }
        });
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // 默认选中第一个
    if (this.isCheck == 1) {
      this.$nextTick(() => {
        this.$refs.table.setCurrentRow(this.formTable.tableData[0], true); // 高亮某一行
      });
      this.rowIndex = 0;
    }
  },
  methods: {
    // 监听表格中【多选按钮】的选中
    selectTdClick(selection, row) {
      this.selectRowList = selection;
      this.$emit("selectTdClick", selection);
    },
    // 表格的【全选按钮】
    selectAllClick(row) {
      this.$emit("selectTdClick", row);
      this.selectRowList = row;
    },
    // 行被点击时,将行数据传递给父组件
    // 单击
    rowClick(row) {
      let rowIndex = null; // 选中点击的是哪行
      this.formTable.tableData.forEach((item, index) => {
        if (item == row) {
          rowIndex = index;
          this.rowIndex = index;
        }
      });
      this.$emit("rowClick", row, rowIndex);
    },

    // 双击行数据的时候
    rowDblclick(row) {
      // this.$emit("rowDblclick", row);
    },

    // 更换页码返回顶部
    toScrollTop() {
      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      });
    },
    // 【下拉搜索单选】
    // 打开小窗口之前 获取弹窗相关数据
    async openDialog(item, index, row) {
      this.rowIndex = index;
      this.actionValue = item.actionValue;
      this.operateType = item.operateType; //标记下拉多选

      // 判断是否存在关联字段，请先填写关联字段内容
      if (item.unActionValue != null) {
        this.unActionValue = item.unActionValue;
        this.paramValue = row[this.unActionValue];
        let title = this.tableHeader.find(
          key => key.paramName == this.unActionValue
        ).title;
        // 判断关联值是否为空
        if (this.paramValue == null || this.paramValue == "") {
          this.$message.error("请先填选【" + title + "】");
          return;
        }
        // if (this.actionValue == "employeeId") {
        //   this.unActionValue = "departmentName"
        // }
      }

      this.openDialogVisible = true; // 打开小弹窗
      let res = null;
      if (item.actionValue == "groupId") {
        let { data: res1 } = await this.$http.get("/api/" + item.actionUrl, {
          params: {
            groupId: 0
          }
        });
        res = res1;
      } else if (item.actionValue == "craftRouteId") {
        let { data: res1 } = await this.$http.get("/api/" + item.actionUrl, {
          params: {
            orgId: this.orgData.orgType,
            itemId: row.id
          }
        });
        res = res1;
      } else {
        let { data: res1 } = await this.$http.get("/api/" + item.actionUrl, {
          params: {
            orgId: this.orgData.orgType
          }
        });
        res = res1;
      }
      if (res.result) {
        if (res.dataId != undefined) {
          this.dataId = res.dataId;
        }
        this.actionObj = res.obj;
        this.dialogTitle = res.obj.menuName;
      } else {
        this.$message.error(res.msg);
      }
    },

    // 获取到焦点的时候获取带出数据的url
    focusInput(item, index) {
      this.quickUrl = item.quickUrl;
      this.rowIndex = index; // 记录表格里面的哪一行数据
      this.actionValue = item.actionValue;
    },

    // 【远程搜索下拉数据】
    async remoteMethod(queryString) {
      this.loading = true;
      let { data: res } = await this.$http.get(
        "/api/" + this.quickUrl + queryString,
        {
          params: {
            orgId: this.orgData.orgType
          }
        }
      );
      if (res.result) {
        this.loading = false;
        this.selectHeader = res.obj.titleParam;
        this.options = res.obj.items;
      } else {
        this.$message.error(res.msg);
      }
    },

    // 下拉框显示/隐藏的时候
    visibleChange(k) {
      if (!k) {
        this.selectHeader = [];
        this.options = [];
      }
    },
    // 【明细部分】 返回数据
    returnData(rowdata) {
      // 先去遍历点击的该行数
      for (let i in this.tableHeader) {
        if (this.tableHeader[i].actionValue == this.actionValue) {
          for (let j in this.formTable.tableData[this.rowIndex]) {
            // teamId = id        teamName = name
            for (let k in rowdata) {
              if (k == this.tableHeader[i].lockId) {
                this.formTable.tableData[this.rowIndex][this.actionValue] =
                  rowdata[k];
              }
              if (k == this.tableHeader[i].lockName) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].paramName
                ] = rowdata[k];
              }
            }
          }
        }

        // 相反 notAffectValue 互斥事件
        if (this.tableHeader[i].notAffectValue == this.actionValue) {
          if (!this.tableHeader[i].null) {
            this.tableHeader[i].null = !this.tableHeader[i].null;
          }
          for (let j in this.formTable.tableData[this.rowIndex]) {
            // teamId = id teamName = name
            for (let k in rowdata) {
              if (k == this.tableHeader[i].lockId) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].actionValue
                ] = 0;
              }
              if (k == this.tableHeader[i].lockName) {
                this.formTable.tableData[this.rowIndex][
                  this.tableHeader[i].paramName
                ] = "";
              }
            }
          }
        }
      }
      // console.log(this.formTable.tableData);
      this.openDialogVisible = false;
      this.actionObj = null;
    },
    // 关闭对话框模块
    dialogBeforeClose() {
      this.openDialogVisible = false;
      this.actionObj = null;
      // 如果是多选
      if (this.operateType == "selectMany") {
        this.$refs.infoDialogRefs.selectTableData = [];
        this.$refs.infoDialogRefs.$refs.tableChild.$refs.table.clearSelection();
      }
    },
    //  批量 小弹窗获取数据对话框的 关闭事件
    dialogBeforeClose1() {
      this.fillopenDialogVisible = false;
      this.actionObj = null;
    },

    // 填充字段的选择
    lotFillChange() {
      // console.log(this.lotFillParam);
      this.lotFillValue = null;
      this.lotFillValueFS = null;
    },

    // 【填充按钮】的点击事件
    fillClick() {
      if (this.selectRowList.length == 0) {
        this.$message.error("请选择需要填充的行数据");
      } else if (!this.lotFillParam || !this.lotFillValue) {
        this.$message.error("请填写填充数据");
      }
      // 对于类型是 带出数据输入框的
      else if (this.lotFillParam.type == "dataSelect") {
        // 若当前选中的字段存在【关联字段】的
        if (this.lotFillParam.unActionValue !== null) {
          this.unActionValue = this.lotFillParam.unActionValue;
          let title = this.tableHeader.find(
            key => key.paramName == this.unActionValue
          ).title;
          // 选中的行数据里面是否存在【生产车间】的值不一致
          // 选中行的【生产车间】数据
          let values = this.selectRowList.map(item => item[this.unActionValue]);
          let paramNameSet = [...new Set(values)];
          if (paramNameSet.length > 1) {
            //
            this.$message.error("所选行数据【" + title + "】值存在不一致");
            return;
          } else if (paramNameSet[0] == "" || paramNameSet[0] == null) {
            this.$message.error("关联值【" + title + "】不能为空");
            return;
          }
          // 选中行的关联字段的值 不相等的话
          else if (paramNameSet[0] !== this.lotFillValue[this.unActionValue]) {
            this.$message.error("所选行数据【" + title + "】值不一致");
            return;
          }
        }

        // 遍历选择的行数据
        this.selectRowList.forEach(item => {
          // 遍历表格数据 对选中的表格数据进行修改
          this.formTable.tableData.forEach((item1, index1) => {
            if (item == item1) {
              for (let i in this.tableHeader) {
                // 判断是否为携带字段
                if (this.tableHeader[i].actionValue == this.fillActionValue) {
                  // teamId = id        teamName = name
                  // 遍历选中的值
                  for (let k in this.lotFillValue) {
                    if (k == this.tableHeader[i].lockId) {
                      this.formTable.tableData[index1][
                        this.fillActionValue
                      ] = JSON.parse(JSON.stringify(this.lotFillValue[k]));
                    }
                    if (k == this.tableHeader[i].lockName) {
                      this.formTable.tableData[index1][
                        this.tableHeader[i].paramName
                      ] = this.lotFillValue[k];
                      // console.log(k);
                    }
                  }
                }

                // 相反 notAffectValue 互斥事件
                if (
                  this.tableHeader[i].notAffectValue == this.fillActionValue
                ) {
                  // teamId = id teamName = name
                  for (let k in this.lotFillValue) {
                    if (k == this.tableHeader[i].lockId) {
                      this.formTable.tableData[index1][
                        this.tableHeader[i].actionValue
                      ] = 0;
                    }
                    if (k == this.tableHeader[i].lockName) {
                      this.formTable.tableData[index1][
                        this.tableHeader[i].paramName
                      ] = "";
                    }
                  }
                }
              }
            }
          });
        });
      }
      // 普通类型输入框 的
      else {
        // 遍历选择的行数据
        this.selectRowList.forEach(item => {
          // 遍历表格数据 对选中的表格数据进行修改
          this.formTable.tableData.forEach((item1, index1) => {
            if (item == item1) {
              this.formTable.tableData[index1][
                this.lotFillParam.paramName
              ] = JSON.parse(JSON.stringify(this.lotFillValue));
            }
          });
        });
      }
    },
    // 表格行新增
    addRow() {
      this.formTable.tableData.push(
        JSON.parse(JSON.stringify(this.addTableData))
      );
    },
    // 表格行复制
    copyRow() {
      let list = {};
      if (this.selectRowList.length == 0) {
        this.$message.error("请选择需要复制的行数据!");
      } else {
        this.selectRowList.forEach((item, index) => {
          list = this.selectRowList[index];
          list.id = 0; //新数据设置id为0
          this.formTable.tableData.push(JSON.parse(JSON.stringify(list)));
        });
      }
    },
    // 表格行删除
    deleteRow() {
      if (this.selectRowList.length == 0) {
        this.$message.error("请选择需要删除的行数据!");
      } else {
        this.$confirm("即将删除所选中的行数据?", "⚠警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.selectRowList.forEach(item =>
              this.formTable.tableData.splice(
                this.formTable.tableData.findIndex(item1 => item == item1),
                1
              )
            );
          })
          .catch(() => {});
      }
    },

    // 批量填充的数据带出
    focusFilter() {
      this.fillQuickUrl = this.lotFillParam.quickUrl;
      this.fillActionValue = this.lotFillParam.actionValue;
    },
    //  批量填充=【远程搜索下拉数据】
    async remoteFilMethod(queryString) {
      this.loading = true;
      let { data: res } = await this.$http.get(
        "/api/" + this.fillQuickUrl + queryString,
        {
          params: {
            orgId: this.orgData.orgType
          }
        }
      );
      if (res.result) {
        this.loading = false;
        this.selectHeader = res.obj.titleParam;
        this.options = res.obj.items;
      } else {
        this.$message.error(res.msg);
      }
    },

    // 批量填充数据的小窗口
    async openDialog1(item) {
      // item =lotFillParam 为选中的查询的字段值
      this.fillActionValue = item.actionValue; // 存贮关联的值
      if (item.unActionValue != null) {
        if (this.selectRowList.length == 0) {
          this.$message.error("存在关联字段，请先选择需要填充的行数据");
          return;
        }
        this.unActionValue = item.unActionValue;
        // title 关联字段的名称
        let title = this.tableHeader.find(
          key => key.paramName == this.unActionValue
        ).title;
        let values = this.selectRowList.map(e => e[this.unActionValue]);
        let paramNameSet = [...new Set(values)];
        // 所选的行数据关联值不一致
        if (paramNameSet.length > 1) {
          this.$message.error("所选行数据【" + title + "】值存在不一致");
          return;
        }
        // 所选的行数据的关联值为空
        else if (paramNameSet[0] == "" || paramNameSet[0] == null) {
          this.$message.error("关联值【" + title + "】不能为空");
          return;
        }
        this.paramValue = paramNameSet[0]; // 拿到关联字段的值
      }

      this.fillopenDialogVisible = true;
      let { data: res } = await this.$http.get("/api/" + item.actionUrl, {
        params: {
          orgId: this.orgData.orgType
        }
      });
      if (res.result) {
        if (res.dataId != undefined) {
          this.dataId = res.dataId;
        }
        this.actionObj = res.obj;
        this.dialogTitle = res.obj.menuName;
      } else {
        this.$message.error(res.msg);
      }
    },

    // 回填数据
    returnData1(rowdata) {
      this.lotFillValueFS = rowdata.name;
      this.lotFillValue = rowdata; // 查询值
      this.fillopenDialogVisible = false;
      this.actionObj = null;
      // console.log(this.lotFillValue);
    },

    // 【筛选】
    //选中筛选条件的事件
    selectChange(data) {
      // 拼接当前字段的 筛选提交
      console.log(data);
      let property = data["property"]; // 选中的字段
      let value = data["value"];
      this.rules[property] = value;
      // 重新遍历表格的数据
      this.formTable.tableData = this.tableData;
      // 遍历过滤条件
      for (let key in this.rules) {
        this.formTable.tableData = this.formTable.tableData.filter(item => {
          if (
            item[key] == null ||
            this.rules[key] == null ||
            item[key] == "" ||
            this.rules[key] == ""
          ) {
            return item[key] == this.rules[key];
          } else {
            return item[key]
              .toString()
              .toLowerCase()
              .includes(this.rules[key].toString().toLowerCase());
          }
        });
        // toLowerCase() 将字符串转化为小写
        // includes()  判断字符串里面是否包含某一个元素  有返回true,没有返回false
      }
    },
    // 筛选的【重置】事件
    resetChange(data) {
      // 清空当前字段的筛选条件
      delete this.rules[data["property"]];
      this.formTable.tableData = this.tableData;
      // 再次遍历过滤条件
      for (let key in this.rules) {
        this.formTable.tableData = this.formTable.tableData.filter(item => {
          if (
            item[key] == null ||
            this.rules[key] == null ||
            item[key] == "" ||
            this.rules[key] == ""
          ) {
            return item[key] == this.rules[key];
          } else {
            return item[key]
              .toString()
              .toLowerCase()
              .includes(this.rules[key].toString().toLowerCase());
          }
        });
      }
    },
    // 表格的【上一行】
    toPreClick() {
      this.$emit("toPreClick");
    },
    // 表格的【下一行】
    toNextClick() {
      this.$emit("toNextClick");
    },
    toLineMethod() {
      let row = this.formTable.tableData[this.rowIndex];
      this.$nextTick(() => {
        this.$refs.table.setCurrentRow(
          this.formTable.tableData[this.rowIndex],
          true
        );
      });
      this.$emit("rowClick", row, this.rowIndex);
    },
    // 保存部件，调用父组件的保存editRole2.vue
    savePart() {
      this.$emit("editrMethod");
    }
  }
};
</script>
<style scoped>
.tableContain {
  width: 100%;
  height: 85%;
}

.tableContain p {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tableContain .editInput {
  background-color: #eefefe;
}

.btnList {
  display: flex;
  height: 30px;
  align-items: center;
  margin-bottom: 5px;
}

.btnList div {
  margin-left: 30px;
}

.star {
  padding-right: 5px;
  color: red;
  font-size: 18px;
}

.selectHeaderClass,
.selectTd {
  min-width: 120px;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
  border-right: 1px solid #333;
  flex-shrink: 0;
  /**0 不缩小  1 缩小 */
  flex-grow: 1;
  /**0 不放大  1 放大 */
  overflow: hidden;
  /*溢出隐藏*/
  white-space: nowrap;
  /*溢出不换行*/
  text-overflow: ellipsis;
  /*文字超出宽度则显示ellipsis省略号*/
}

.selectHeaderClass:last-child {
  border: none;
}

.selectTd:last-child {
  border: none;
}

.headerTr {
  width: 100%;
  height: 24px;
  font-size: 13px;
  display: flex;
  background-color: #eeeeee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.selectTr {
  height: 100%;
  display: flex;
}

.optionContain {
  padding: 0 !important;
  font-size: 12px !important;
}

.searchIcon {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
  color: #30a7d6;
  font-weight: 700;
  font-size: 20px;
}
</style>
<style>
.el-table .cell {
  white-space: nowrap;
  width: fit-content;
}

.tableContain .tableLineClass .el-table .el-table__cell {
  color: #1f1c1c;
  padding: 6px 0;
  box-sizing: border-box;
}

.tableContain .tableLineClass .el-input.is-disabled .el-input__inner {
  background-color: #e8ecf3;
}

.tableContain .tableLineClass .el-table .cell {
  font-size: 14px;
  /* padding: 0 5px; */
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100% !important;
  height: 100% !important;
}

.tableContain .tableLineClass .el-autocomplete {
  width: 100%;
  /* 下拉选择、带出框的大小*/
}

.tableContain .tableLineClass .el-input__inner {
  width: 100%;
  height: 30px;
  border: none;
  padding: 0 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
  color: #444547 !important;
}

/* 表格单元格 溢出提示 */
.el-tooltip__popper {
  max-width: 150px;
}

.el-table__body tr > td {
  height: 30px !important;
}

.el-table__body tr.current-row > td {
  height: 30px !important;
  background-color: #ffebc4 !important;
}

.tableContain .tableLineClass .el-table tbody tr:hover > td {
  background-color: #ffebc4 !important;
}

.tableContain .tableLineClass .el-table__empty-text {
  font-size: 18px;
  font-weight: 700;
}

.tableFormClass .tableLineClass .cell .el-form-item {
  width: 100%;
  margin: 0;
}

.tableFormClass .tableLineClass .cell .el-form-item__content {
  width: 100% !important;
  height: 100% !important;
}

.tableFormClass .tableLineClass .cell p {
  margin: 0;
  height: 30px;
  font-size: 12px;
}

/* 表格输入框的宽高 */
.tableFormClass .tableLineClass .cell .el-input--mini,
.tableFormClass .tableLineClass .cell .el-select,
.tableFormClass .tableLineClass .cell .el-input-number--mini {
  /* width: 100%; */
  height: 100%;
}

/* 小数输入框的 调节器 */
.tableFormClass
  .tableLineClass
  .el-input-number--mini
  .el-input-number__decrease,
.tableFormClass
  .tableLineClass
  .el-input-number--mini
  .el-input-number__increase {
  width: 20px;
  background-color: #fff;
}

.tableFormClass .tableLineClass .el-table__row {
  height: 50px !important;
}

.tableFormClass .tableLineClass .el-table__row td {
  padding: 0 !important;
}

.el-select-dropdown__list {
  padding-top: 0 !important;
}

.tableContain .tableLineClass .NotAllowClass .is-disabled .el-checkbox__inner {
  background-color: #fefefe !important;
}

.tableContain .inputText {
  width: 180px;
}
</style>